<template>
  <div class="height">
    <city-head></city-head>
    <city-search :cities="cities"></city-search>
    <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list>
    <city-word :word="word" @changeWord="handleWord"></city-word>
  </div>
</template>
<script>
import CityHead from "./components/head";
import CitySearch from "./components/serch";
import CityList from "./components/list";
import CityWord from "./components/word";

import { CityModel } from "../../models/CityModel";
const cityModel = new CityModel();
export default {
  name: "City",
  components: {
    CityHead,
    CitySearch,
    CityList,
    CityWord
  },
  data() {
    return {
      cities: [],
      hotCities: [],
      word:[],
      letter:"",
    };
  },
  mounted() {
    cityModel.getCity().then(res => {
      var data = res.data.data;
      var { cities, hotCities } = data;
      this.hotCities = hotCities;
      this.cities = cities;
      var word = this.word;
      for(let key in cities){
          word.push(key);
      }
      this.word = word;
    });
  },
  methods: {
      handleWord(word){
          this.letter = word;
      }
  },
};
</script>
<style lang="scss" scoped>
.height {
  height: 3000px;
}
</style>
